<template>
  <div class="main">
    <div class="leftOptionBox">
      <div class="titleBox">
        <i class="el-icon-reading titleIcon"></i>
        <h2 class="titleText">管理员平台</h2>
      </div>
      <router-link class="notUnderline" to="/home"><div class="option"><i class="el-icon-house">&emsp;</i>首&emsp;&emsp;页</div></router-link>
      <router-link class="notUnderline" to="/activity"><div class="option"><i class="el-icon-present">&emsp;</i>活动发布</div></router-link>
      <router-link class="notUnderline" to="/reportNeed"><div class="option"><i class="el-icon-warning-outline">&emsp;</i>申报须知</div></router-link>
      <router-link class="notUnderline" to="/informNotice"><div class="option"><i class="el-icon-bell">&emsp;</i>通知公告</div></router-link>
      <router-link class="notUnderline" to="/downloadCenter"><div class="option"><i class="el-icon-download">&emsp;</i>下载中心</div></router-link>
      <router-link class="notUnderline" to="/fileCenter"><div class="option"><i class="el-icon-paperclip">&emsp;</i>附件中心</div></router-link>
      <router-link class="notUnderline" to="/reportFile"><div class="option"><i class="el-icon-files">&emsp;</i>申报材料</div></router-link>
      <router-link class="notUnderline" to="/askAndAnswer"><div class="option"><i class="el-icon-chat-dot-square">&emsp;</i>问题回复</div></router-link>
    </div>
    <div class="topBox">
      <div class="top">
        <div class="userBox">
          <div class="headPic" :style='{"background-image":"url("+userPic+")"}'></div>
          <div class="username">ID:{{username}}</div>

          <div class="topDateBox">
            <input class="topDate" list="date" value="July 2020"/>
<!--            <datalist id="date">-->
<!--              <option value="July 2020"/>-->
<!--              <option value="July 2021"/>-->
<!--              <option value="July 2019"/>-->
<!--            </datalist>-->

            <el-badge is-dot class="item">
              <i class="el-icon-bell" style="color: white;font-size: 30px"></i>
            </el-badge>
          </div>

        </div>
      </div>
      <div class="content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>


import $ from 'jquery'
export default {
  name: "Main",
  data(){
    return{
      userPic: "https://img0.baidu.com/it/u=1207683104,1878376760&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=647",
      username: JSON.parse(window.localStorage.getItem("userInfo")).ausername,
      date: "july 2020"
    }
  }
}
</script>
<style scoped>
.topDateBox{
  margin-left: 780px;
}
.topDate{
  text-indent: 1em;
  width: 170px;
  height: 40px;
  border-radius: 20px;
  background-color: transparent;
  outline: none;
  border: 1px solid white;
  margin-top: 13px;
  color: white;
  font-size: 20px;
}
.userBox{
  display: flex;
}
.headPic{
  height: 40px;
  width: 40px;
  border: 1px solid cadetblue;
  border-radius: 50%;
  margin-top: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.username{
  font-size: 17px;
  color: white;
  line-height: 70px;
  margin-left: 10px;
}
.notUnderline{
  text-decoration: none;
}
.titleText{
  margin-bottom: 60px;
  margin-top: 10px;
}
.titleIcon{
  font-size: 50px;
}
.titleBox{
  margin-top: 10px;
  text-align: center;
  color: white;
}
.option{
  text-align: center;
  color: white;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  margin-top: 30px;
}
.option:hover{
  background-color: #3066E3;
}
.main{
  width: 1400px;
  height: 900px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  display: flex;
}
.leftOptionBox{
  background-color: rgba(22, 48, 108,.9);
  width: 200px;
  height: 100%;
}
.topBox{
  height: 100%;
  width: 1200px;
}
.top{
  width: 100%;
  background-color: rgba(22, 48, 108,.9);
  height: 70px;
}
.content{
  height: 830px;
  background-color: rgba(0, 0, 255,.1);
  overflow-y: scroll;
  overflow-x: hidden;
}
.content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : rgba(50,100,200,0.3);
}
.content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background   : rgba(0,0,0,0.1);
}
</style>
